<template>
    <div class="juziItem">
        <nuxt-link :to="`/category/${item.categoryId}`">
            <span class='category'>
                {{item.category}}
            </span>
        </nuxt-link>
        <div class="jzContent">
            <p><nuxt-link :to="`/sentence/${item.id}`">{{item.content}}</nuxt-link></p>
        </div>
        <p class="formTit">
            <nuxt-link :to="`/special/${item.sid}?fromId=${item.id}`">{{item.title}}</nuxt-link>
        </p>
        <div class="tags">
            <nuxt-link v-for="(tag,tagKey) in item.tag" :key="tagKey" :to="`/search?keyword=${tag}&type=tag`">
                <span>{{tag}}</span>
            </nuxt-link>
        </div>
        <div class="hands">
            <div class="handItem">
                <div class="item" @click="handThumbsUp()" :class="{active: sentenceThumbsUp.includes(item.id)}">
                    <i class="iconfont">&#xe60c;</i>
                    <span>{{item.like || 0}}</span>
                </div>
            </div>
            <div class="handItem">
                <div class="item" @click="handCollect()" :class="{active: collectList.includes(item.id)}">
                    <i class="iconfont">&#xe646;</i>
                    <span>{{item.collect || 0}}</span>
                </div>
            </div>
            <div class="handItem">
                <nuxt-link :to="`/sentence/${item.id}`">
                    <div class="item">
                        <i class="iconfont">&#xe60d;</i>
                        <span>0</span>
                    </div>
                </nuxt-link>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from "vuex"
export default {
    props: ['item'],
    data() {
        return {
        }
    },
    computed: {
        ...mapGetters('sentence', ['sentenceThumbsUp', 'collectList'])
    },
    methods: {
        ...mapActions('sentence', ['thumbsUp', 'collect']),
        ...mapMutations({
            setSignVisible: 'SET_SIGNVISIBLE'
        }),
        async handThumbsUp() {
            let sentenceId = this.item.id;
            let status = 1;
            if (this.sentenceThumbsUp.includes(sentenceId)) {
                status = 0;
            }
            let result = await this.thumbsUp({
                typeId: sentenceId,
                type: 1,
                status: status
            });
            if (result.code == -10) {
              this.setSignVisible(true)
              return
            }
            if (result.code !== 0) {
                this.$notify({
                    message: result.msg,
                    type: 'warning',
                    offset: 50,
                    duration: 3000
                });
                return;
            }
        },
        async handCollect() {
            let sentenceId = this.item.id;
            let status = 1;
            if (this.collectList.includes(sentenceId)) {
                status = 0;
            }
            let result = await this.collect({
                sentenceId,
                status
            });
            if (result.code == -10) {
              this.setSignVisible(true)
              return
            }
            if (result.code !== 0) {
                this.$notify({
                    message: result.msg,
                    type: 'warning',
                    offset: 50,
                    duration: 3000
                });
                return;
            }
        }
    }
}
</script>